<template>
  <Page :name="name">
    <div class="enter-code">
      <div class="title">
        <p>{{title}}</p>
      </div>
      <ul>
        <li v-if="step.first" class="first">
          <div class="pay-tool">
            <div class="pay-tool-content">
              <div class="pay-tool-inputs">
                <div class="item" v-for="i in items">
                  <span class="icon_dot" v-if="oldPassword[i]"></span>
                </div>
              </div>
            </div>
            <p class="tips"> <span @click="forgetPassword">忘记密码</span> </p>
            <div class="pay-tool-keyboard">
              <ul>
                <li @touchstart="keyUpHandle($event,1)" v-for="val in keys">
                  {{ val }}
                </li>
                <li class="del" @touchstart="delHandle(1)">
                  <img src="~/assets/img/clear.png" alt="" class="icon-del">
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li v-if="step.two" class="two">
          <div class="pay-tool">
            <div class="pay-tool-content">
              <div class="pay-tool-inputs">
                <div class="item" v-for="i in items">
                  <span class="icon_dot" v-if="newPassword[i]"></span>
                </div>
              </div>
            </div>
            <div class="pay-tool-keyboard">
              <ul>
                <li @touchstart="keyUpHandle($event,2)" v-for="val in keys">
                  {{ val }}
                </li>
                <li class="del" @touchstart="delHandle(2)">
                  <img src="~/assets/img/clear.png" alt="" class="icon-del">
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li v-if="step.three" class="three">
          <div class="pay-tool">
            <div class="pay-tool-content">
              <div class="pay-tool-inputs">
                <div class="item" v-for="i in items">
                  <span class="icon_dot" v-if="rePassword[i]"></span>
                </div>
              </div>
            </div>
            <div class="pay-tool-keyboard">
              <ul>
                <li @touchstart="keyUpHandle($event,3)" v-for="val in keys">
                  {{ val }}
                </li>
                <li class="del" @touchstart="delHandle(3)">
                  <img src="~/assets/img/clear.png" alt="" class="icon-del">
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>

    </div>
    <div class="pup-common" v-if="pupStatus" >
      <div class="mask"  @click="pupStatus=false"></div>
      <div class="con">
        <div class="header"  @click="pupStatus=false">
          <p>联系客服</p>
        </div>
        <ul>
          <li>
            <p>请暂时联系客服</p>
          </li>
          <li v-for="item in contact">
            <a :href="'tel:'+ item.area_code + item.tel">
              <div>
                <span>客服电话A</span>
                <p>+ {{item.area_code}} {{item.tel}}</p>
              </div>
              <img src="~assets/img/news_phone.png" alt="">
            </a>

          </li>

        </ul>
      </div>

    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
export default {
  components: {
    Page,
  },

  data() {
    return {
        name:"设置支付密码",
        items: [0, 1, 2, 3, 4, 5],
        keys: keys(),
        oldPassword: [],
        newPassword: [],
        rePassword: [],
        pupStatus:false,
        step:{
          first:true,
          two:false,
          three:false,
        },
        flag:true,//是否设置支付密码
        title:'请输入支付密码验证身份',
        contact:[]
    }
  },
  mounted(){
    this.getDate();
    this.getContact();
  },
  methods: {
      keyUpHandle (e,n) {
        let text = e.currentTarget.innerText;
        switch(n)
        {
        case 1:
          let oldlen = this.oldPassword.length;
          if (!text || oldlen >= 6) return;
          this.oldPassword.push(text);
          this.ajaxData(n);
          break;
        case 2:
          let newlen = this.newPassword.length;
          if (!text || newlen >= 6) return;
          this.newPassword.push(text);
          this.ajaxData(n);
          break;
        case 3:
          let relen = this.rePassword.length;
          if (!text || newlen >= 6) return;
          this.rePassword.push(text);
          this.ajaxData(n);
          break;
        }

      },
      delHandle (n) {
        switch(n)
        {
        case 1:
          if (this.oldPassword.length <= 0) return false ;
          this.oldPassword.pop();
          break;
        case 2:
          if (this.newPassword.length <= 0) return false ;
          this.newPassword.pop();
          break;
        case 3:
          if (this.rePassword.length <= 0) return false ;
          this.rePassword.pop();
          break;
        }

      },
      ajaxData (n) {
        if (this.oldPassword.length >= 6 && n == 1) {
          this.oldPassword = parseInt(this.oldPassword.join(' ').replace(/\s/g, ''));
          this.$axios.post('?ct=api&ac=check_pay_pwd',{
            pay_password:this.oldPassword
          }).then(rs=>{
            if(rs.data.code == 0){
              this.title = '请输入新的支付密码';
              this.step.first = false;
              this.step.three = false;
              this.step.two = true;
            }else{
              this.oldPassword=[];
              this.$toast(rs.data.msg);
            }
          });
        }
        if (this.newPassword.length >= 6 && n == 2) {
          this.title = '请再次输入以确认';
          this.step.first = false;
          this.step.two = false;
          this.step.three = true;
          this.newPassword = parseInt(this.newPassword.join(' ').replace(/\s/g, ''));
        }
        if (this.rePassword.length >= 6 && n == 3) {
          this.rePassword = parseInt(this.rePassword.join(' ').replace(/\s/g, ''));
          this.submit();
        }
        return false;
      },
      forgetPassword:function(){
        this.pupStatus = true;
      },
      async submit(){
        if(this.rePassword!=this.newPassword){
          this.$toast("两次密码不一致");
          this.rePassword = [];
          return false;
        }
        let url ="";
        let params = {}
        if(this.flag){
          url = '?ct=api&ac=reset_pay_pwd';
          params={
            pay_password:this.oldPassword,
            new_pay_password:this.newPassword,
          }
        }else{
          url = '?ct=api&ac=set_pay_pwd';
          params={
            pay_password:this.newPassword,
            repay_password:this.rePassword,
          }
        }
        let { data: rs } = await this.$axios.post(url,params);
        if(rs.code == 0){
          this.$router.push({path:"/setting"});
          this.$toast(rs.msg);
        }else if(rs.code=='-10115'){
          this.$toast(rs.msg);
          setTimeout(function(){
             window.location.reload();
          },1000)

        }else{
          this.$toast(rs.msg);
        }
      },
      async getDate(){
        let { data: rs } = await this.$axios.post('?ct=api&ac=has_pay_pwd');
        if(rs.code == 0){
            this.title = '请输入支付密码验证身份';
            this.step.first = true;
            this.step.three = false;
            this.step.two = false;
            this.name="修改支付密码";
            this.flag=true;
        }else{
            this.title = '请输入支付密码，密码为6位数字';
            this.step.first = false;
            this.step.three = false;
            this.step.two = true;
            this.name="设置支付密码"
            this.flag=false;
        }
      },
      async getContact(){
        let { data: rs } = await this.$axios.post('?ct=member&ac=contacts');
        if(rs.code == 0){
           this.contact = rs.data.list;
        }else{
          this.$toast(rs.msg);
        }
      }

    }

}
</script>

<style lang="less" scoped>
  .enter-code{
    .title{
      text-align: center;
      margin-top:90px;
      color:#999;
      font-size:30px;
      padding:30px;
      span,.phone{
        color:#333;
      }
      .phone{
        margin-top:20px;
      }
    }
    .pay-tool {
      position: relative;
      overflow: hidden;
      &-content {
        .pay-tool-inputs {
          margin: 30px auto 0;
          display: flex;
          border:none;
          .item {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #fff;
            border-radius: 4px;
            margin-right:20px;
            font-size:32px;
            &:last-child {
              border-right: none;
            }
            &:first-child{
              margin-left:20px;
            }
            .icon_dot {
              display: inline-block;
              width: 14px;
              height: 14px;
              background: #000;
              border-radius: 14px;
            }
          }
        }
      }
      .tips{
        text-align: right;
        font-size:30px;
        color:#999;
        margin-top:30px;
        padding-right:30px;
        span{
          color:#2086f9;
        }
      }
      .pay-tool-keyboard {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          li {
            width: 33.3333%;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border-right: 1px solid #e3e3e4;
            border-bottom: 1px solid #e3e3e4;
            font-size:36px;
            font-weight: bold;
            background: #fff;
            &.del{
              img{
                width:54px;
                height:40px;
              }
            }
            &:nth-child(1), &:nth-child(2), &:nth-child(3) {
              border-top: 1px solid #eee;
            }
            &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
              border-right: none;
            }
            &:nth-child(10), &:nth-child(11), &:nth-child(12) {
              border-bottom: none;
            }
            &:nth-child(10), &:nth-child(12), &:active {
              background-color: #f6f6f7;
            }
            &:nth-child(12):active {
              background-color: #f6f6f7;
            }
          }
        }
      }
    }

  }
  .pup-common{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .mask{
      background: rgba(0,0,0,0.3);
      width:100%;
      height:100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
    }
    .con{

      position: absolute;
      bottom:0;
      background: #fff;
      width:100%;
      padding-bottom:100px;
      .header{
        line-height: 88px;
        text-align: center;
        font-size:32px;
        background: url("~assets/img/back_grey.png") no-repeat 20px center;
        background-size:13px 24px;
        border-bottom:1px solid #ededed;
      }
      ul{
        li,a{
          display: flex;
          display: -webkit-flex;
          flex-direction:row;
          align-items:center;
          padding:30px;
          border-bottom:1px solid #ededed;
          width:100%;
          a{
            padding:0;
          }
          &:last-child{
            border-bottom:0;
          }
          div{
            flex: 1;
            span{
              font-size:24px;
              color:#999;

            }

          }
          img{
            width:32px;
            height:32px;
          }
          p{
              font-size:30px;
              color:#333;
              margin-top:10px;
          }
        }
      }
    }
  }
</style>
